import vue from '@vitejs/plugin-vue'
import path from 'path'
import createAutoImport from './auto-import'
import createComponents from './components'
import createSvgIcon from './svg-icon'
import createCompression from './compression'
import createSetupExtend from './setup-extend'
import { PluginOption } from 'vite'

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Unocss from 'unocss/vite'
import UnocssIcons from '@unocss/preset-icons'
import { presetAttributify, presetUno } from 'unocss'
const pathSrc = path.resolve(__dirname, 'src')
import transformerDirective from '@unocss/transformer-directives'
export default function createVitePlugins(
  viteEnv: Record<string, string>,
  isBuild = false
) {
  const vitePlugins: PluginOption[] = [
    vue(),
    Unocss({
      transformers: [transformerDirective()],
      presets: [
        UnocssIcons({
          extraProperties: {
            display: 'inline-block',
            height: '1.2em',
            width: '1.2em',
            'vertical-align': 'text-bottom'
          }
        }),
        presetAttributify(),
        presetUno()
      ]
    }),
    Icons({
      // scale: 1, // 缩放
      compiler: 'vue3', // 编译方式
      defaultClass: 'inline', // 默认类名
      defaultStyle: 'vertical-align:sub;', // 默认样式
      autoInstall: true
      // jsx: 'react' // jsx支持
    })
  ]
  vitePlugins.push(
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          // '@/hooks/web/useI18n': ['useI18n'],
          '@/hooks/web/useMessage': ['useMessage'],
          '@/utils/dict': ['DICT_TYPE']
        }
      ],
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json'
      },
      // dirs: ["src/utils/request.ts"],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon'
        })
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts')
    })
  )
  vitePlugins.push(
    Components({
      resolvers: [
        IconsResolver({
          prefix: 'icon' // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
          // {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标。
          // alias: { park: 'icon-park' } 集合的别名
          // enabledCollections: ['ep'] // 这是可选的，默认启用 Iconify 支持的所有集合['mdi']
        })
      ],
      dts: path.resolve(pathSrc, 'components.d.ts')
    })
  )
  vitePlugins.push(createAutoImport())
  vitePlugins.push(createComponents())
  vitePlugins.push(createSetupExtend())
  vitePlugins.push(createSvgIcon(isBuild))
  isBuild && vitePlugins.push(...createCompression(viteEnv))
  return vitePlugins
}
